<template>
  <div class="container">
    <div class="cardStyle-page">
      <ul class="list">
        <li class="item" v-for="(item, index) in styleList" :key="index" @click="selectStyle(item.id)">
          <div class="box">
            <div class="banner">
              <img class="image" mode="widthFix" :src="item.image" alt="">
            </div>
            <div class="content">
              <div class="title">{{ item.name }}</div>
              <div class="button">
                <div class="btn" :class="{ 'on': item.id == formData.style }">{{ item.id == formData.style ? '已选择' : '选择' }}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      styleList: [
        {
          id: 0,
          name: '红色简约',
          image: '/static/images/card/1.jpg',
        },
        {
          id: 1,
          name: '淡蓝大气',
          image: '/static/images/card/2.jpg',
        },
        {
          id: 2,
          name: '深蓝商务',
          image: '/static/images/card/3.jpg',
        },
        {
          id: 3,
          name: '蓝色简约',
          image: '/static/images/card/4.jpg',
        },
      ],
      formData: {},
    }
  },

  onShareAppMessage (res) {
    let self = this;
    let url = `${self.$confs.shareUrl}?id=${self.userInfo.id}`;
    return {
      title: self.$confs.shareTitle,
      path: url,
    }
  },

  computed: {
    userInfo () {
      return this.$store.state.userInfo;
    },
  },

  methods: {
    /*
     * 选择风格
     */
    selectStyle (index) {
      if (this.userInfo.style == index) return;
      let self = this;
      self.$modal.show({
        content: '是否选择该风格',
        success (res) {
          if (res.confirm) {
            self.formData.style = index;
            self.submit();
          }
        }
      });
    },
    submit () {
      let self = this;
      self.$toast.show();
      self.$axios.userInfo(self.formData).then(res=>{
       self.$toast.hide();
        if (0 === res.data.code * 1) {
          self.$store.dispatch('getUserInfo', {
            style: res.data.data.style,
          });
        }else {
           wx.showToast({
            title: '网络错误',
            icon: 'none',
            duration: 1500,
          });
        }
      })
    },
  },

  mounted () {
    let { id , style } = this.userInfo;
    this.formData =  { id , style };
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
